import React, { Component } from 'react'
import './index.scss'
import {Tabs, Toast} from 'antd-mobile'
import {getFindList} from "./model";
import {getFindListTitle} from "./model";
import TopBar from '../../components/topBar'
import {PullToRefresh} from "antd-mobile";
import {connect} from "react-redux";
import store from "../../store";

class Find extends Component{
	constructor(props) {
		super(props);
		this.state = {
				currentPage: 2,
				currentId: 0,
				findListTitle: [],
				refreshing: false,
				height: document.documentElement.clientHeight,
		}
	}

	render() {
			const tabs = [];
			this.state.findListTitle.map(item => {
					return tabs.push({id:item.id,title:item.name})
			});

			return (
			<div id="find" ref="find">
					<TopBar title="斑马发现" left={false} right={false}/>

					<Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4}/>} tabBarInactiveTextColor="#898989" tabBarActiveTextColor="#333" tabBarTextStyle={{fontSize:'13px'}} tabBarUnderlineStyle={{borderColor: "#C84C7B"}} onTabClick={this.handleClick.bind(this)} swipeable={false}>
							{this.renderContent}
					</Tabs>
			</div>
		)
	}
		renderContent = tab =>
				(<div style={{padding: '0 18px', backgroundColor: '#fff',}}>
					{/*content区*/}
						<PullToRefresh
								damping={60}
								ref={el => this.ptr = el}
								style={{
										height: this.state.height,
										overflow: 'auto',
								}}
								indicator={{ deactivate: '上拉可以刷新' }}
								direction={'up'}
								refreshing={this.state.refreshing}
								onRefresh={() => {
										this.setState({ refreshing: true });
										console.log('请求数据');
										getFindList(this.state.currentId,this.state.currentPage).then(res => {
												this.setState({
														currentPage: this.state.currentPage+1,
														refreshing: false
												},() => {
														store.dispatch({
																type: 'addList',
																payload: res.list
														})
												})
										});
								}}
						>
						{
								this.props.findList.map(item =>
										<div className="find-item" key={item.id} onClick={this.toBmfindDetail.bind(this,item.id)}>
												<div className="img">
														<img src={item.head_pic} alt=""/>
														<span className="sort-name">{item.sort_name}</span>
												</div>
												<p className="title">{item.title}</p>
												<p className="subtitle">{item.subtitle}</p>
										</div>
								)
						}
						</PullToRefresh>

				</div>);

	toBmfindDetail(id) {
			this.props.history.push(`/bmdetail/${id}`)
	}
	handleClick(sort) {
			console.log(sort);
			this.setState({
					currentId: sort.id,
					currentPage: 2
			});
			document.documentElement.scrollTop = document.body.scrollTop = 0;
			Toast.loading('数据加载中...',500,()=>{},true);

			this.props.initFindList(sort.id,1);
	}

	componentDidMount() {
			const hei = this.state.height - 50;
			setTimeout(() => this.setState({
					height: hei,
			}), 0);

			getFindListTitle().then(res => {
					console.log(res);
					this.setState({
							findListTitle: res.list
					})
			});

			if(this.props.findList.length===0){
					console.log("请求ajax");
					this.props.initFindList(0,1);
			} else {
					console.log("不请求ajax");
			}
	}
}

export default connect(
		(state) => {
				return {
						findList: state.findListReducer
				}
		},
		{
				initFindList(sort, page) {
						return getFindList(sort,page).then(res => {
								setTimeout(() => {
										Toast.hide()
								},300);
								return {
										type: "initList",
										payload: res.list
								}
						}).catch(err => {
								console.log("网络错误", err);
								Toast.hide();
								Toast.offline('网络错误',0,()=>{},true)
						});
				},
		}
)(Find)
